<template>
  <div class="templatetable-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-button
          :icon="DocumentAdd"
          plain
          type="primary"
          @click="handleAdd()"
        >
          新增
        </el-button>
        <el-button
          :disabled="!state.currentRow"
          :icon="Edit"
          plain
          type="warning"
          @click="toUpdate()"
        >
          修改
        </el-button>
        <el-button
          :disabled="!state.currentRow"
          :icon="Delete"
          plain
          type="danger"
          @click="toDelete()"
        >
          删除
        </el-button>
        <el-button :icon="SuccessFilled" plain type="primary" @click="toSave()">
          保存
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <div style="padding: 10px"></div>
    <el-row>
      <el-col :span="3">
        <el-tree
          :data="deptTree"
          highlight-current="true"
          node-key="pkDept"
          :props="{ children: 'downs', label: 'deptShowName' }"
          @node-click="handleTreeClick"
        />
      </el-col>
      <el-col :span="18">
        <el-form
          ref="formRef"
          :disabled="state.disabled"
          label-width="120px"
          :model="state.form"
          :rules="rules"
        >
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="部门编码" prop="deptCode">
                <el-input v-model="state.form.deptCode" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="state.form.deptName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级部门">
                <el-input v-model="state.form.parentName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-checkbox v-model="state.form.isProduce" label="是否生产" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import {
    DocumentAdd,
    Delete,
    Edit,
    SuccessFilled,
  } from '@element-plus/icons-vue'
  import {
    getDeptTreeApi,
    addDeptApi,
    updateDeptApi,
    removeDeptApi,
  } from '@/api/base/dept'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const formRef = ref()
  const state = reactive({
    form: {},
    disabled: true,
    currentRow: {},
  })
  const rules = reactive({
    deptCode: [{ required: true, trigger: 'blur', message: '请输入部门编码' }],
    deptName: [{ required: true, trigger: 'blur', message: '请输入部门名称' }],
  })
  const deptTree = ref([])

  const getDept = async () => {
    const res = await getDeptTreeApi({ pkCorp: pkCorp })
    if (res && res.code === 2000) {
      let newDept = {
        deptShowName: '部门',
        downs: res.data,
      }
      deptTree.value = []
      deptTree.value.push(newDept)
    }
  }

  const handleTreeClick = (row) => {
    state.currentRow = row
    state.disabled = true
    state.form.deptCode = row.deptCode
    state.form.deptName = row.deptName
    state.form.parentName = row.parentName
    state.form.isProduce = row.isProduce
  }

  const handleAdd = () => {
    state.disabled = false
    state.form.pkCorp = pkCorp
    state.form.deptCode = ''
    state.form.deptName = ''
    state.form.isProduce = false
    state.form.parentName = state.currentRow.deptName
    state.form.parentPkDept = state.currentRow.pkDept
  }
  const toSave = () => {
    if (!formRef.value) return
    formRef.value.validate(async (valid) => {
      if (valid) {
        let res = null
        if (state.form.pkDept) {
          res = await updateDeptApi({
            ...state.form,
          })
        } else {
          res = await addDeptApi({
            ...state.form,
          })
        }
        if (res && res.code === 2000) {
          $baseMessage('操作成功', 'success')
        } else {
          $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
        }
        getDept()
      } else {
        return false
      }
    })
  }
  const toUpdate = () => {
    state.disabled = false
    state.form = state.currentRow
  }

  const toDelete = async () => {
    ElMessageBox.confirm('确定要删除该部门吗?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const res = await removeDeptApi({ pkDept: state.currentRow.pkDept })
        if (res && String(res.code) === '2000') {
          $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
          getDept()
        } else {
          $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
        }
      })
      .catch(() => {})
  }
  // ---- 钩子 ----
  onMounted(() => {
    getDept()
  })

  // ---- 钩子 ----
</script>
